<template>
  <div class="tokens-card">
      <div v-for="item in tokenCards" :key="item.id"
        class="interact" onclick="Bus.switchProperDetail(this)">
        <div class="ico"></div>
        <p class="t">HLD <span>/ FRK</span></p>
        <div class="c">
            <span class="money">{{item.money}}</span>
            <div class="chg-vol">
            <span class="key">CHG</span><span class="value">+0.03%</span>
            <span class="key">VOL</span><span class="value">1,000</span>
            </div>
        </div>
        <div class="detail"></div>
            <!-- <div :class="{'detail':true, 'pop': isPop}"> -->
        </div>
  </div>
</template>

<script>
export default {
  name: 'tokens-card',
  init() {},
  mounted() {
      Bus.switchProperDetail = function(obj) {
        const className = obj.querySelector('.detail').className
        obj.querySelector('.detail').className = className.includes('pop') ? 'detail' : 'detail pop'
      }
  },
  components: {},
  data() {
    return {
        tokenCards: [
          {
            id: 1,
            money: '10,000.00'
          },
          {
            id: 2,
            money: '20,000.00'
          },
          {
            id: 3,
            money: '17,220.00'
          },
          {
            id: 4,
            money: '37,133.00'
          },
          {
            id: 5,
            money: '12,666.12'
          },
          {
            id: 6,
            money: '27,888.33'
          }
        ]
    }
  },
  methods: {
    test(i) {
      // Bus.$emit('topbar', i)
    }
  },
  beforeDestroy() {}
};
</script>

<style scoped="scoped" lang="scss">
.tokens-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  >div{
    //   background:rgba(0, 0, 0, 5%);
      background:#070F4E;
      color: #F6F5F5;
      border-radius: 30px;
      width: 180px;
      padding: 20px 40px 20px 20px;
      margin: 25px 10px;
      text-align: left;
      position: relative;
      .ico{
        background:url(../assets/land2_room.png) no-repeat;
        width: 65px;
        height: 65px;
        background-size: 100% auto;
        background-position: 0px 0;
        position: absolute;
        top: 15px;
        left: 15px;
      }
      .t{
        margin: 8px 0 12px 0;
        padding: 0 0 0 53px;
        span{
            font-size: 12px;
            font-weight: normal;
        }
      }
      .c{
        color: inherit;
        padding: 0;
        font-family: "Krona One", monospace;
        .money{
            font-size: 19px;
            padding: 15px 0;
            display: inline-block;
        }
        .chg-vol{
            white-space: nowrap;
            .key{
                font-size: 14px;
                color:#b9b9b9;
                padding: 0 5px 0 0;
            }
            .value{
                font-size: 13px;
                color:#1FFFC9;
            }
        }
      }
      &:after{
        content: '';
        background: url(../assets/token_home_ico.png) no-repeat;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 60px;
        height: 55px;
        background-size: auto 50%;
        background-position: center center;
        background-color: rgba(255,255,255,.2);
        border-bottom-left-radius: 30px;
      }
      .detail{
        // display: none;
        opacity: 0;
        height: 0;
        transition: opacity .3s ease, height .3s ease;
        background: url(../assets/estate_hover.png) no-repeat;
        background-size: 100% auto;
        position: absolute;
        left: 0;
        top:0;
        bottom: -200px;
        right: 0;
        z-index: 100;
        @media screen and (max-width: 640px) {
          &.pop{
            opacity: 1;
            height: 400px;
          }
        }
      }
      @media screen and (min-width: 641px) {
        &:hover{
          .detail{
            opacity: 1;
            height: 400px;
            display: block;
          }
        }
      }
    }
  }
</style>
